<template>
  <div>
    <!-- 日志列表 -->
    <el-dialog
      :visible.sync="visible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @closed="closedDialog"
      :append-to-body="true"
      width="70%"
      :title="$t('schedule.log')">
      <el-row :gutter="20" style="margin-bottom:15px;">
        <el-col :span="5">
          <el-input :placeholder="$t('schedule.inputJobId')" v-model="jobId"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="getDataList">{{$t('SYS.search')}}</el-button>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="tableData"
        v-loading="dataLoading"
        stripe
        border
        row-key="id"
        :header-row-style="{'color':'#409EFF'}"
        style="width: 100%;margin-bottom:15px;">
        <el-table-column prop="jobId" :label="$t('schedule.jobId')" header-align="center" align="center" width="230"></el-table-column>
        <el-table-column prop="beanName" :label="$t('schedule.beanName')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="params" :label="$t('schedule.params')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="status" :label="$t('schedule.status')" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" size="small">{{ $t('schedule.statusLog1') }}</el-tag>
            <el-tag v-else type="danger" size="small" @click.native="showErrorInfo(scope.row.id)" style="cursor: pointer;">{{ $t('schedule.statusLog0') }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="times" :label="$t('schedule.times')" align="center" ></el-table-column>
        <el-table-column prop="createDate" :label="$t('schedule.createDate')" header-align="center" align="center" width="230"></el-table-column>
      </el-table>
      <div style="text-align:center;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-sizes="[5,10, 20, 50, 100]"
          layout="sizes,total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <template slot="footer">
        <el-button @click="visible = false">{{$t('SYS.close')}}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      visible:false,
      tableData:[],
      page:1,
      limit:10,
      total:0,
      jobId:'',
      dataLoading:false,
    }
  },
  mounted(){
    this.getDataList()
  },
  methods:{
    init(){
      this.visible = true
    },
    handleSizeChange(val){
      this.limit = val
      this.getDataList()
    },
    handleCurrentChange(val){
      this.getDataList()
    },
    closedDialog(){
      this.$emit('closedDialog')
    },
    getDataList(){
      this.dataLoading = true
      this.$http.get(this.$baseUrl.sysScheduleLogPage,{
        params:{
          order:"",
          orderField:"",
          page:this.page,
          limit:this.limit,
          jobId:this.jobId
        }
      }).then(({data})=>{
        if(data.code != 0){
          return this.$message.error(data.msg)
        }
        this.dataLoading = false
        this.tableData = data.data.list
        this.total = data.data.total
      }).catch((err)=>{
        this.dataLoading = false
        this.$message.error($t('request.serverError'))
      })
    }
  }
}
</script>

<style>

</style>